<template>
  <div class="payment">
    <el-page-header @back="$router.go(-1)" :content="$route.meta.title"></el-page-header>
    <div class="h2">批次信息</div>
    <div class="section">
      <el-table :data="tableData1" style="width: 100%">
        <!-- <el-table-column align="center" prop="company_title" label="支付企业"></el-table-column> -->
        <el-table-column align="center" prop="patch_no" label="批次号"></el-table-column>
        <el-table-column align="center" prop="orderNo" label="打款单号"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="date" label="结算周期"></el-table-column>
        <el-table-column align="center" prop="money_income" label="支付总额"></el-table-column>
        <el-table-column align="center" prop="money_serve" label="服务费总额"></el-table-column>
        <el-table-column align="center" prop="money_pay" label="实付总额"></el-table-column>
      </el-table>
    </div>
    <div class="h2" v-if="type === '1'">打款材料</div>
    <div class="section">
      <el-table v-if="type === '1'" :data="tableData2" style="width: 100%">
        <el-table-column align="center" prop="name" label="下载财务付款资料">
          <template>
            <el-button type="primary" size="small">下载</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="address" label="校验打款状态">
          <template>
            <el-button type="primary" size="small">上传</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="address" label="上传打款凭证">
          <template>
            <el-button type="primary" size="small">上传</el-button>
            <el-button type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="h2" v-if="type === '2'">付款明细</div>
    <div class="section">
      <el-table v-if="type === '2'" :data="tableData3" style="width: 100%">
        <el-table-column align="center" prop="order_no" label="结算单号">
        </el-table-column>
        <el-table-column align="center" prop="bank_number" label="收款方客户账号">
        </el-table-column>
        <el-table-column align="center" prop="bank_name" label="收款方账户姓名"></el-table-column>
        <el-table-column align="center" prop="bank_title" label="收款方开户行名称"></el-table-column>
        <el-table-column align="center" prop="money_income" label="支付金额"></el-table-column>
        <el-table-column align="center" prop="money_pay" label="结算金额"></el-table-column>
        <el-table-column align="center" prop="personal_username" label="注册账号"></el-table-column>
        <el-table-column align="center" prop="status_pay" label="付款状态"></el-table-column>
      </el-table>
      <el-pagination
        v-if="type === '2'"
        @current-change="handleCurrentChange"
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>
    <div class="desc" v-if="type === '1'">
      <div class="title">温馨提示：</div>
      <p>1. 下载开票资料：点击下载可下载财务打款所需材料；</p>
      <p>2. 校验打款状态：操作人需要在打款材料使用后，追加“打款状态”字段，1为已打款，2为未打款，并且上传。格式：Excel表格；</p>
      <p>3. 校验表格有一个单元格错误或与下载财务付款表格不同，将校验失败；</p>
      <p>4. 上传打款凭证：操作人需要打款后的打款凭证整理上传，格式：RAR，ZIP，大小不超过10M；</p>
    </div>
    <div class="desc" v-if="type === '2'">
      <div class="title">温馨提示：</div>
      <p>1. 银行打款状态不会马上返回，请持续关注！</p>
      <p>2. 如有打款失败请及时与企业联系告知错误原因。</p>
    </div>
    <div class="buttons">
      <el-button type="primary" @click="payAll()">批量付款</el-button>
      <el-button type="warning" @click="downloadfile()">导出未打款</el-button>
      <el-button type="warning">线下付款</el-button>
      <el-button type="success" @click="doEnd()">完结</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'payment',
  data() {
    return {
      tableData1: [],
      tableData2: [{}],
      tableData3: [],
      type: '2',
      pageIndex: 1,
      pageSize: 15,
      totalCount: 0
    }
  },
  methods: {
    downloadfile() {
      let url = `/company/money/settle/undoneexport/${this.$route.query.id}`
      this.$http.get(url, {}, {
        responseType: 'blob'
      }).then(res => {
        let blob = new Blob([res])
        let reader = new FileReader()
        reader.readAsDataURL(blob)
        reader.onload = (e) => {
          let a = document.createElement('a')
          a.download = '未打款名单.xlsx'
          a.href = e.target.result
          document.body.appendChild(a)
          a.click()
          a.remove()
        }
      })
    },
    payAll() {
      this.$confirm('确认批量付款?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() =>{
        this.$http.put(`/company/money/settle/pay/${this.$route.query.id}`).then(res => {
          if (res.status === 1) {
            this.$message.success('批量付款成功')
          }
        })
      })
    },
    doEnd() {
      this.$confirm('确认完结?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        this.$http.put(`/company/money/settle/ending/${this.$route.query.id}`).then(res => {
          if (res.status === 1) {
            this.$message.success('完结成功')
          }
        })
      })
    },
    handleCurrentChange(val) {
      this.pageIndex = val
      this.getDealInfo()
    },
    getDealInfo() {
      this.$http.get(`/company/money/settle/detail/${this.$route.query.id}`, {
        page: this.pageIndex,
        page_size: this.pageSize
      }).then(res => {
        if (res.status === 1) {
          this.tableData1 = [res.data.detail]
          this.tableData3 = res.data.list
          this.totalCount = res.data.countAll
        }
      })
    }
  },
  created() {
    this.type = this.$route.query.type || '2'
  },
  mounted() {
    this.getDealInfo()
  }
}
</script>
<style lang="less" scoped>
.desc {
  margin-top: 50px;
  .title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  p {
    font-size: 12px;
    margin: 0;
    line-height: 30px;
  }
}
.buttons {
  margin-top: 30px;
  text-align: center;
  .el-button {
    width: 120px;
  }
}
</style>